<div class="px-3 py-2 space-y-1 border-t dark:border-gray-700">
    <% locals.siteData.languages.forEach(locale => {
        let href = '';
        // 添加版本路径
        if (pageData.version) {
            href += '/' + pageData.version;
        }
        // 添加语言路径
        href += '/' + locale.key;
        // 添加页面路径
        href += pageData.noLocalePath.startsWith('/') ? pageData.noLocalePath : '/' + pageData.noLocalePath;
    %>
    <a href="<%= href %>"
       class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700
                            <%= locale.key === locals.pageData.language ? 'bg-gray-50 dark:bg-gray-700' : '' %>">
        <span><%= locale.flag %></span>
        <span><%= locale.name %></span>
    </a>
    <% }) %>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const mobileMenu = document.getElementById('mobile-menu');
        const menuButton = document.querySelector('button[data-menu-toggle]');

        // 只有当菜单元素存在时才添加事件监听
        if (mobileMenu && menuButton) {
            document.addEventListener('click', function (event) {
                if (!mobileMenu.contains(event.target) &&
                    !menuButton.contains(event.target) &&
                    !mobileMenu.classList.contains('hidden')) {

                    mobileMenu.classList.add('hidden');

                    const menuIcon = menuButton.querySelector('.menu-icon');
                    const closeIcon = menuButton.querySelector('.close-icon');

                    if (menuIcon && closeIcon) {
                        menuIcon.classList.remove('hidden');
                        closeIcon.classList.add('hidden');
                    }
                }
            });
        }
    });
</script>